<template>
  <view>
    <view class="page commission">
      <view class="userblock">
        <view class="line able">
          <view class="text">
            <view class="num">{{ commission['money'] }}</view>
            <view class="title">可提现佣金(元)</view>
          </view>
          <view class="btn btn-warning pull-right" @tap="toWithdraw">申请提现</view>
        </view>
        <view class="fui-cell-group" style="margin-top: 2rpx">
          <navigator class="fui-cell" url="/pages/commission/withdraw/list" style="padding: 16rpx 24rpx; background: #ffebee">
            <image class="icon" src="/static/commission/ic_withdraw.png"></image>
            <view class="fui-cell-text" style="color: #777; font-size: 24rpx">提现记录</view>
            <image class="icon-r" src="/static/commission/ic_arrow_r.png"></image>
          </navigator>
        </view>
      </view>
      <view class="fui-block-group">
        <navigator class="fui-block-child" url="/pages/commission/bill">
          <view class="icon" style="color: #ff4357">
            <image src="/static/commission/ic_wallet.png"></image>
          </view>
          <view class="text">
            <view class="title">佣金明细</view>
            <text>{{ commission['total'] }}</text>
            <text>元</text>
          </view>
        </navigator>
        <navigator class="fui-block-child" url="/pages/commission/member/index">
          <view class="icon" style="color: #ff6e02">
            <image src="/static/commission/ic_invite.png"></image>
          </view>
          <view class="text">
            <view class="title">我的下级</view>
            <text>{{ commission['member_count'] }}</text>
            <text>人</text>
          </view>
        </navigator>
        <navigator class="fui-block-child" url="/pages/commission/member/tuser">
          <view class="icon" style="color: #9ec9f4">
            <image src="/static/commission/ic_member.png"></image>
          </view>
          <view class="text">
            <view class="title">直推用户</view>
            <text>{{ commission['tuser_count'] }}</text>
            <text>人</text>
          </view>
        </navigator>
        <navigator class="fui-block-child" url="/pages/commission/order/index">
          <view class="icon" style="color: #9ec9f4">
            <image src="/static/commission/ic_order.png"></image>
          </view>
          <view class="text">
            <view class="title">推广的订单</view>
            <text>{{ commission['order_count'] }}</text>
            <text>笔</text>
          </view>
        </navigator>
      </view>
      <view class="fui-cell-group">
        <!-- #ifdef MP-WEIXIN -->
        <button open-type="share" class="fui-cell btn-share" @tap="showShareTips">
          <image class="icon" src="/static/commission/ic_share.png"></image>
          <view class="fui-cell-text">邀请好友</view>
          <image class="icon-r" src="/static/commission/ic_arrow_r.png"></image>
        </button>
        <!-- #endif -->
        <navigator class="fui-cell" url="/pages/commission/share">
          <image class="icon" src="/static/commission/ic_qrcode.png"></image>
          <view class="fui-cell-text">推广海报</view>
          <image class="icon-r" src="/static/commission/ic_arrow_r.png"></image>
        </navigator>
      </view>
    </view>
<!--    <view class="share_tips" v-if="shareTipsShow" @click="closeShareTips">
      <image src="/static/commission/share_tips.png"></image>
    </view>-->

    <view class="footer">
      <text class="agreement" @tap="agreeShow = true" style="color:#ea4679;">《用户推广协议》</text>
      <text class="agreement" @tap="ruleShow = true" style="color:#ea4679; margin-left: 30rpx;">《分佣规则介绍》</text>
    </view>

    <u-popup
        :closeOnClickOverlay="false"
        :closeable="false"
        mode="center"
        :round="6"
        :safeAreaInsetBottom="false"
        :show="agreeShow"
    >
      <view class="protocol">
        <view class="title">推广协议</view>
        <view class="content">
          <scroll-view :scrollY="true" style="height: 100%; overflow-y: auto">
            <rich-text :nodes="setting.commission_agree"></rich-text>
          </scroll-view>
        </view>
        <view class="button">
          <u-button
              v-if="user.commission_level === 0"
              @click="toApply"
              color="#ea4679"
              shape="circle"
              :text="applyBtnText"
              type="primary"
          ></u-button>
          <u-button
              v-else
              @click="agreeShow = false"
              color="#ea4679"
              shape="circle"
              text="关闭"
              type="primary"
          ></u-button>
        </view>
      </view>
    </u-popup>

    <u-popup
        :closeOnClickOverlay="false"
        :closeable="false"
        mode="center"
        :round="6"
        :safeAreaInsetBottom="false"
        :show="ruleShow"
    >
      <view class="protocol">
        <view class="title">规则介绍</view>
        <view class="content">
          <scroll-view :scrollY="true" style="height: 100%; overflow-y: auto">
            <rich-text :nodes="setting.commission_rule"></rich-text>
          </scroll-view>
        </view>
        <view class="button">
          <u-button
              @click="ruleShow = false"
              color="#ea4679"
              shape="circle"
              text="关闭"
              type="primary"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      commission: {},
      user: {},
      setting: {},
      share: {},
      shareTipsShow: false,
      agreeShow: false,
      ruleShow: false
    }
  },
  onShow() {
    this.getData();
  },
  onPullDownRefresh() {
    this.getData();
    setTimeout(() => {
      uni.hideNavigationBarLoading(); //完成停止加载
      uni.stopPullDownRefresh(); //停止下拉刷新
    }, 500);
  },
  computed: {
    applyBtnText() {
      if (this.setting.join_type === 'auto') {
        return '同意协议，立即成为推广员'
      } else if (this.setting.join_type === 'apply') {
        return '同意协议，申请成为推广员'
      } else if (this.setting.join_type === 'pay') {
        return '同意协议，申请成为推广员'
      }
    }
  },
  methods: {
    getData() {
      this.$util.request({
        url: '/commission/index'
      })
      .then((res) => {
        this.commission = res.data.commission;
        this.user = res.data.user
        this.setting = res.data.setting
        this.share = res.data.share
        if (!this.user.commission_level) {
          this.agreeShow = true
        }
      }).catch(err => {
        this.$util.message(err.message, 'error', function () {
          uni.navigateBack()
        })
      })
    },
    toApply() {
      const that = this
      if (this.user.commission_level > 0) {
        this.agreeShow = false
        this.getData()
        return false
      }
      if (this.setting.join_type === 'auto') {
        this.$util.request({
          url: '/commission/apply',
          loadingText: '正在激活'
        }).then(res => {
          this.agreeShow = false
          this.$util.message(res.message, 'error', function () {
            that.getData()
          })
        })
      } else {
        uni.redirectTo({
          url: '/pages/commission/apply'
        })
      }
    },
    toWithdraw() {
      let commission = this.commission;
      if (!commission || !commission.money) {
        this.$util.message('暂无可提现佣金');
        return;
      }
      uni.navigateTo({
        url: '/pages/commission/withdraw/index?money=' + commission.money
      });
    },
    showShareTips() {
      this.shareTipsShow = true
    },
    closeShareTips() {
      this.shareTipsShow = false
    },
    onShareAppMessage() {
      return {
        title: this.share.title,
        imageUrl: this.share.image,
        path: '/pages/index/index?tuid=' + this.user.id
      }
    }
  }
};
</script>
<style>
page {
  background: #f7f7f8;
}

.page {
  overflow-x: hidden;
  height: auto;
  min-height: 100%;
  overflow-y: scroll;
  padding: 30rpx;
}

.fui-list {
  position: relative;
  display: flex;
  padding: 30rpx 24rpx;
  transition-duration: 300ms;
  align-items: center;
  overflow: hidden;
}

.fui-list-media {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  box-sizing: border-box;
  align-items: center;
  margin-right: 20rpx;
  color: #333;
  position: relative;
}

.fui-list-inner {
  position: relative;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
}

.fui-block-group {
  height: auto;
  overflow: hidden;
  background: #fff;
  position: relative;
  margin-top: 30rpx;
}

.fui-block-group .fui-block-child {
  height: auto;
  width: 33.33%;
  float: left;
  padding: 16rpx 0;
  background: #fff;
  transition: background-color 300ms;
  -webkit-transition: background-color 300ms;
  position: relative;
}

.fui-block-group .fui-block-child .icon {
  height: 108rpx;
  padding-top: 40rpx;
  text-align: center;
  font-size: 56rpx;
  line-height: 60rpx;
}

.fui-cell-group {
  margin-top: 30rpx;
  background-color: #fff;
  line-height: 2;
  font-size: 32rpx;
  overflow: hidden;
  position: relative;
}

.fui-cell-group .fui-cell {
  position: relative;
  padding: 20rpx 30rpx;
  margin: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f8f8f8;
}
.fui-cell-group .fui-cell:last-child {
  border-bottom: none;
}
.fui-cell-group .btn-share {
  background: none;
  text-align: left;
  height: 96rpx;
  border-radius: 0;
}
.fui-cell-group .btn-share:after {
  display: none;
}
.fui-cell-group .btn-share:active {
  background: #ededed;
}

.fui-cell-group .fui-cell .icon {
  margin-right: 12rpx;
  width: 32rpx;
  height: 32rpx;
}

.fui-cell-group .fui-cell .fui-cell-text {
  flex: 1;
  color: #444;
  font-size: 28rpx;
}

.fui-cell-group .fui-cell .icon-r {
  margin-right: 8rpx;
  width: 26rpx;
  height: 26rpx;
}


.commission .userblock {
  overflow: hidden;
}

.commission .userblock .line {
  padding: 15rpx 0 15rpx 0;
}

.commission .userblock .line.total {
  height: 166rpx;
  background: #fff;
  padding: 32rpx 24rpx;
  box-sizing: border-box;
}

.commission .userblock .line.total .title {
  color: #333;
  font-size: 24rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.commission .userblock .line.total .num {
  font-size: 44rpx;
  color: #ea4679;
  line-height: 1.5;
  font-weight: bold;
}

.commission .userblock .line.able {
  font-size: 28rpx;
  height: 200rpx;
  background: #fff;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
}

.commission .userblock .line.able .num {
  font-size: 44rpx;
  color: #ea4679;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.commission .userblock .line .text {
  padding-right: 100rpx;
}

.commission .userblock .line .btn {
  width: auto;
  padding: 0 24rpx;
  border: 1px solid #fff;
  border-radius: 56rpx;
  height: 56rpx;
  line-height: 54rpx;
  margin-right: 0;
  font-size: 26rpx;
}

.btn-warning {
  background: #ea4679;
  color: #fff;
  border: 1px solid #ea4679;
}

.commission .userblock .line.able:after {
  content: ' ';
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  top: -1px;
  height: 1px;
  border-top: 1px solid #ebebeb;
  color: #d9d9d9;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

.commission .fui-block-group {
}

.commission .fui-block-group:after {
  content: ' ';
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  top: 50%;
  height: 1px;
  border-top: 1px solid #ebebeb;
  color: #d9d9d9;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

.commission .fui-block-group:before {
  content: ' ';
  position: absolute;
  top: 20rpx;
  bottom: 20rpx;
  left: 50%;
  width: 1px;
  border-left: 1px solid #ebebeb;
  color: #d9d9d9;
  transform-origin: 0 0;
  transform: scaleX(0.5);
  z-index: 2;
}

.commission .fui-block-group .fui-block-child {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30rpx;
  height: 148rpx;
  box-sizing: border-box;
}

.fui-block-group .fui-block-child::after {
  display: none;
}

.fui-block-group .fui-block-child::before {
  display: none;
}

.commission .fui-block-group .fui-block-child .icon {
  height: auto;
  padding: 0;
}

.fui-block-group .fui-block-child .icon i {
  font-size: 52rpx;
}

.commission .fui-block-group .fui-block-child .icon image {
  width: 64rpx;
  height: 64rpx;
}

.commission .fui-block-group .fui-block-child .text {
  height: auto;
  line-height: 1.5;
  margin-left: 30rpx;
  font-size: 24rpx;
  color: #999;
  text-align: left;
}

.commission .fui-block-group .fui-block-child .title {
  height: auto;
  line-height: normal;
  font-size: 28rpx;
  color: #030303;
  text-align: left;
  margin-bottom: 6rpx;
}

.commission .fui-block-group .fui-block-child .text text {
  color: #666;
  margin-right: 10rpx;
}

.edtion {
  width: 100%;
  position: fixed;
  bottom: 100rpx;
  color: #999999;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0;
}

.li-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 2rpx;
  background: #fff;
  flex-direction: column;
  padding-left: 30rpx;
}

.li-wrap .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f1f1f1;
  padding-right: 30rpx;
}

.li-wrap .list:last-child {
  border-bottom: none;
}

.li-wrap .list .list-l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.li-wrap .list .list-l .icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  /* background: #f1f1f1; */
}

.li-wrap .list .list-l .icon .img {
  width: 40rpx;
  height: 40rpx;
}

.li-wrap .list .list-l .text {
  font-size: 32rpx;
  color: #333333;
}

.li-wrap .list .arrow {
  width: 26rpx;
  height: 26rpx;
  /* border-top: 4rpx solid #ccc;
  border-right: 4rpx solid #ccc;
  transform: rotate(45deg); */
}

.li-wrap .list .arrow image {
  width: 26rpx;
  height: 26rpx;
}

.share_tips {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
}

.share_tips image {
  width: 500rpx;
  height: 400rpx;
  margin: 0 auto;
  float: right;
  margin-right: 20px;
}

.footer {
  font-size: 26rpx;
  margin: 60rpx 0;
  text-align: center;
  width: 100%;
}

.footer navigator {
  display: inline;
}

.protocol {
  box-sizing: border-box;
  width: 86vw;
}

.protocol .title {
  font-size: 36rpx;
  font-weight: 700;
  padding: 30rpx;
  text-align: center;
  color: #111;
}

.protocol .content {
  height: 46vh;
  padding: 0 30rpx;
  color: #111;
  font-size: 30rpx;
  line-height: 44rpx;
}

.protocol .button {
  padding: 30rpx 60rpx;
}

</style>
